<template>
  <section class="workplace-container scrollbar">
    <section class="big-box top-box">
      <div class="left-box box t-row">
        <h3>网站概况</h3>
        <div class="general">
          <div class="general-box">
            <jee-icon iconClass="fabu1" class="jee-svg-icon-2" style="fontSize:40px;" />
            <div class="general-text">
              <p>内容发布数</p>
              <p><span>今日：</span><span class="jee-color">{{ statistics.contentPublishCnt }}</span></p>
              <!-- <p><span>累计：</span><span>{{ statistics.totalContent }}</span></p> -->
            </div>
          </div>
          <!-- <i></i>
          <div class="general-box">
            <jee-icon iconClass="pinglun1" class="jee-svg-icon-2" style="fontSize:40px;" />
            <div class="general-text">
              <p>评论数</p>
              <p><span>今日：</span><span class="jee-color">{{ statistics.todayComment }}</span></p>
              <p><span>累计：</span><span>{{ statistics.totalComment }}</span></p> 
            </div>
          </div> -->
          <i></i>
          <div class="general-box">
            <jee-icon iconClass="huiyuan2" class="jee-svg-icon-2" style="fontSize:40px;" />
            <div class="general-text">
              <p>新增会员数</p>
              <p><span>今日：</span><span class="jee-color">{{ statistics.newMemberCnt }}</span></p>
              <!-- <p><span>累计：</span><span>{{ statistics.memberAuditCnt }}</span></p> -->
            </div>
          </div>
          <i></i>
          <div class="general-box">
            <jee-icon iconClass="tougao" class="jee-svg-icon-2" style="fontSize:40px;" />
            <div class="general-text">
              <p>投稿数</p>
              <p><span>今日：</span><span class="jee-color">{{ statistics.contentContributeCnt }}</span></p>
              <!-- <p><span>累计：</span><span>{{ statistics.totalSubmission }}</span></p> -->
            </div>
          </div>
        </div>
      </div>
      <div class="right-box box t-row">
        <h3>待办事项</h3>
        <div class="backlog">
          <!-- workflow-plugin start -->
          <div class="backlog-box" @click="handleNavWorkflow('/workplace/mailbox')">
            <p>内容</p>
            <p>{{ upcoming.contentAuditCnt || 0 }}</p>
          </div>
          <i></i>
          <!-- workflow-plugin end -->
          <!-- <div class="backlog-box" @click="handleNavComment">
            <p>评论</p>
            <p>{{ upcoming.totalComment || 0 }}</p>
          </div>
          <i></i> -->
          <div class="backlog-box" @click="handleNavVip('/member/auditedMember')">
            <p>会员</p>
            <p>{{ upcoming.memberAuditCnt || 0 }}</p>
          </div>
          <!-- interact-mailbox start -->
          <!-- <i></i> -->
          <!-- <div class="backlog-box" @click="handleMailBox">
            <p>信件</p>
            <p>{{ upcoming.mailboxTotal || 0 }}</p>
          </div> -->
          <!-- interact-mailbox end -->
        </div>
      </div>
    </section>
    <div class="charts_tendency_visitors">
      <div class="charts_tendency">
        <div class="pv_uvlists">
          <div class="tendency_statistics_item">
            <div class='tendency_statistics_title'> 趋势图</div>
            <div class="selectTypes">
              <span>显示指标：</span>
              <a-radio-group v-model:value="showOptionsSelected"
                :options="showOptions.map((item: any) => ({ value: item.value, label: item.label }))"
                @change="handleChange" />
            </div>
          </div>
        </div>
        <div id="summaryTendencyOnline"></div>
        <div class="more" @click="toDetail('flowStatictics/tendency')"><a>查看更多</a></div>
      </div>
      <div class="charts_visitors">
        <div class='newOldvisiter'> 新老客户</div>
        <div class="halfCharts">
          <div id="summaryNewVisitor"></div>
          <div id="summaryOldVisitor"></div>
        </div>
        <div class='visitor-wrap'>
          <div class="visitor">
            <div class="visitor-box">
              <p><span><strong></strong>浏览量</span><span>{{ visitorObj.newVisitorsDto.pvNum }}</span></p>
              <p><span><strong></strong>访客数</span><span>{{ visitorObj.newVisitorsDto.uvNum }}</span></p>
              <p><span><strong></strong>跳出率</span><span v-if="visitorObj.newVisitorsDto.bounceRate">{{
                visitorObj.newVisitorsDto.bounceRate +
                '%' }}</span>
              </p>
              <p><span><strong></strong>平均访问时长</span><span>{{
                transverterMss(visitorObj.newVisitorsDto.averageVisitLength || 0) }}</span>
              </p>

            </div>

          </div>
          <div class="visitor">
            <div class="visitor-box">
              <p><span><strong></strong>浏览量</span><span>{{ visitorObj.oldVisitorsDto.pvNum }}</span></p>
              <p><span><strong></strong>访客数</span><span>{{ visitorObj.oldVisitorsDto.uvNum }}</span></p>
              <p><span><strong></strong>跳出率</span><span v-if="visitorObj.oldVisitorsDto.bounceRate">{{
                visitorObj.oldVisitorsDto.bounceRate + '%' }}</span>
              </p>
              <p><span><strong></strong>平均访问时长</span><span>{{
                transverterMss(visitorObj.oldVisitorsDto.averageVisitLength || 0) }}</span></p>
            </div>
          </div>
        </div>
        <div class="more" @click="toDetail('visitorStatistics/visitor')"><a>查看更多</a></div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { ref, nextTick, computed, onMounted } from "vue";
import { useRouter, } from "vue-router";
import { transverterMss } from '@/utils/common';
import { optionpieHalfDonut, optionLine } from "./echartType/options";
import request from "@/api/index";
import { initEcharts } from "@/components/echarts/index";
import getters from "@/store/getters";
import { getData } from '@/utils/common';
//interface
interface dataSourceType {
  [propName: string | number]: any;
}
//router
const router = useRouter();
// getter
const userInfo = getters.userInfo();
//data
const statistics = ref<dataSourceType>({
  contentPublishCnt: '',
  newMemberCnt: '',
  contentContributeCnt: '',
})
const upcoming = ref<dataSourceType>({
  contentAuditCnt: '',
  memberAuditCnt: '',
  isSupportWorkflow: false,
})

// 趋势图和新老访客
let seleType_label = ref('pvList')
const showOptionsSelected = ref(1);
const showOptions = ref(
  [
    { label: '浏览量(PV)', value: 1 },
    { label: '访问数(UV)', value: 2 },
    { label: 'IP数', value: 3 },
    { label: '跳出率', value: 4 },
    { label: '平均访问时长', value: 5 },
  ]
);
const tyendencyLine = ref(JSON.parse((JSON.stringify(optionLine))));
tyendencyLine.value.series[0].name = '浏览量';
const dataSource_remote = ref<dataSourceType>({});
//新老访问
const visitorObj = ref<dataSourceType>({
  newVisitorsDto: {},
  oldVisitorsDto: {},
});
const newVisitor = ref<dataSourceType>(JSON.parse(JSON.stringify(optionpieHalfDonut)));
const oldVisitor = ref<dataSourceType>(JSON.parse(JSON.stringify(optionpieHalfDonut)));
//computed
seleType_label = computed(() => {
  let label = 'pvList'
  showOptionsSelected.value == 1 ? ((label = 'pvList') && (tyendencyLine.value.series[0].name = '浏览量(PV)')) :
    showOptionsSelected.value == 2 ? ((label = 'uvList') && (tyendencyLine.value.series[0].name = '访问数(UV)')) :
      showOptionsSelected.value == 3 ? ((label = 'ipList') && (tyendencyLine.value.series[0].name = 'IP数')) :
        showOptionsSelected.value == 4 ? ((label = 'bounceRateList') && (tyendencyLine.value.series[0].name = '跳出率')) :
          ((label = 'averageVisitLengthList') && (tyendencyLine.value.series[0].name = '平均访问时长'));
  return label
});
// methods 
const handleNavWorkflow = (path: string) => {
  toUpComingDetail(path);
}
//跳转到会员待审核

const handleNavVip = (path: string) => {
  toUpComingDetail(path);
};
const toUpComingDetail = (path: string) => {
  router.push(`${path}`);
};
const getWorktopSummary = async () => {
  let res = await request.getWorktopSummary({});
  nextTick(() => {
    statistics.value = { ...res };
  })
}
const getWorktopMytoDoList = async () => {
  let res = await request.getWorktopMytoDoList({});
  nextTick(() => {
    upcoming.value = { ...res };
  })
}
// 获取趋势图数据
const getGenaralTendencyLine = async () => {
  let data: dataSourceType = {
    siteId: userInfo.siteId,
    startTime: getData(0),
    endTime: getData(0),
  }
  dataSource_remote.value = await request.getGenaralTendencyLine(data);
  nextTick(() => {
    setData();
  })
}
const setData = () => {
  let res = dataSource_remote.value;
  if (seleType_label.value == 'averageVisitLengthList') {
    tyendencyLine.value.series[0].data = res[`${seleType_label.value}`].map((item: dataSourceType) => Math.round(item.num / 1000));
  } else {
    tyendencyLine.value.series[0].data = res[`${seleType_label.value}`].map((item: dataSourceType) => item.num);
  }

  tyendencyLine.value.xAxis.data = res[`${seleType_label.value}`].map((item: dataSourceType) => item.index);

  initEcharts('summaryTendencyOnline', tyendencyLine.value);
}
//获取新老访客
const getGenaralnewOldVisitors = async () => {
  let data: dataSourceType = {
    siteId: userInfo.siteId,
    startTime: getData(0),
    endTime: getData(0),
  }
  visitorObj.value = await request.getGenaralnewOldVisitors(data);

  for (let key in visitorObj.value) {
    visitorObj.value[key].percentage = (visitorObj.value[key].percentage * 100).toFixed()
    visitorObj.value[key].bounceRate = (visitorObj.value[key].bounceRate * 100).toFixed()
  }
  
  nextTick(() => {
    newVisitor.value.series[0].data[0] = { value: visitorObj.value.newVisitorsDto.percentage, name: '新客户' };
    oldVisitor.value.series[0].data[0] = {
      value: visitorObj.value.oldVisitorsDto.percentage, name: '老客户'
    };
    initEcharts('summaryNewVisitor', newVisitor.value);
    initEcharts('summaryOldVisitor', oldVisitor.value);
  })
}
const toDetail = (path: string) => {
  router.push(`/siteStatistics/${path}`)
};
const handleChange = () => {
  nextTick(() => {
    setData()
  })
}
// mounted
onMounted(() => {
  getWorktopSummary();
  getWorktopMytoDoList();
  getGenaralTendencyLine()
  getGenaralnewOldVisitors();

})

</script>
<style lang="scss" scoped>
.workplace-container {
  overflow: auto;
  height: calc(100% - 72px);
  background-color: #fff;
  padding: 16px;

  .select {
    margin-bottom: 40px;

    .bugXiugai {
      margin-right: 20px !important;

      span:last-child {
        padding-left: 10px !important;
      }

      .el-radio .el-radio__label {
        padding-left: 10px !important;
      }
    }
  }

  .interval {
    width: 1px;
    height: 438px;
    background-color: #E8E8E8;
    margin-top: -230px;
  }

  .visitor-box {
    p {
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      padding-left: 20px;
      line-height: 56px;

      strong {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: -4px;
      }
    }

    p:nth-child(1) {
      strong {
        background-color: #ED4A66;
      }
    }

    p:nth-child(2) {
      strong {
        background-color: #2593FC;
      }
    }

    p:nth-child(3) {
      strong {
        background-color: #F9CB34;
      }
    }

    p:nth-child(4) {
      strong {
        background-color: #38C060;
      }
    }
  }

  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 39px;

    span:first-child {
      font-size: 18px;
      color: #333333;
      font-weight: bold;
    }

    span:last-child {
      font-size: 14px;
      cursor: pointer;
    }
  }

  .backlog {
    display: flex;
    justify-content: space-between;

    .backlog-box {
      width: 33%;
      box-sizing: border-box;
      padding: 15px 0 55px;
      cursor: pointer;

      p {
        text-align: center;
      }

      p:first-child {
        font-size: 16px;
        color: #666;
        margin-bottom: 15px;
      }

      p:last-child {
        font-size: 30px;
        color: #333;
        font-weight: 600;
      }
    }

    i {
      width: 1px;
      min-width: 1px !important;
      border-left: 1px solid rgba(230, 230, 230, 1);
      height: 60px;
      margin-top: 20px;
    }
  }

  .big-box {
    display: flex;

    .left-box {
      width: 60%;
      margin-right: 24px;
      flex: 1;
    }

    .right-box {
      width: 600px;
      min-width: 600px;
    }

    .box {
      border: 1px solid rgba(232, 232, 232, 1);
      border-radius: 4px;
      height: 100%;
      box-sizing: border-box;
      padding: 30px;

      h3 {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
      }

      .general {
        display: flex;
        justify-content: space-between;

        i {
          width: 1px;
          min-width: 1px !important;
          height: 60px;
          background: rgba(230, 230, 230, 1);
          margin-top: 20px;
        }

        .general-box {
          width: 24%;
          min-width: 200px;
          padding: 8px 0px 8px 40px;
          display: flex;
          box-sizing: border-box;

          .jee-svg-icon-2 {
            margin-top: 20px;
            margin-right: 24px;
          }

          .general-text {
            p:first-child {
              font-size: 18px;
              color: #333;
              font-weight: 500;
            }

            p:nth-child(2) {
              line-height: 72px;
              font-size: 14px;

              span:first-of-type {
                color: #999999;
                display: inline-block;
                margin-right: 5px;
              }

              span:last-of-type {
                font-size: 16px;
                font-weight: 600;
              }
            }

            p:last-child {
              font-size: 14px;

              span:first-child {
                color: #999999;
                display: inline-block;
                margin-right: 5px;
              }

              span:last-child {
                color: #666666;
                font-size: 16px;
              }
            }
          }
        }

        @media screen and (max-width: 1900px) {
          .general-box {
            padding: 8px 10px 8px 20px;
          }
        }

        .general-box:first-of-type {
          padding-left: 20px;
        }
      }

      &.t-row {
        padding: 24px 0;

        h3 {
          padding-left: 20px;
        }
      }

    }
  }

  .top-box {
    height: 200px;
    margin-bottom: 24px;
  }



  .charts_tendency_visitors {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 500px;
    margin-bottom: 24px;

    .charts_tendency {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      margin-right: 24px;
      flex: 1;
      padding: 24px;
      position: relative;

      .tendency_statistics_title {
        font-size: 18px;
        color: #333;
        font-weight: 700;
        margin-bottom: 16px;
      }

      #summaryTendencyOnline {
        height: 400px;
      }
    }



    .charts_visitors {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      width: 600px;
      padding: 24px;
      position: relative;

      .newOldvisiter {
        font-size: 18px;
        color: #333;
        font-weight: 700;
        margin-bottom: 16px;

      }

      #summaryNewVisitor {
        width: 260px;
        height: 260px;
        display: inline-block;
        margin-right: 24px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          width: 0;
          height: 430px;
          border-right: 1px dashed #e8e8e8;
          top: -24px;
          right: -16px;
        }
      }

      #summaryOldVisitor {
        width: 260px;
        height: 260px;
        display: inline-block;
      }


      .visitor-wrap {
        display: flex;
        justify-content: space-between;
      }

      .visitor {
        display: flex;
        justify-content: center;
        width: calc(50% + 10px);
      }

      .visitor-box {
        width: 250px;

        &:last-of-type {
          width: 350px;
        }

        &+.visitor-box {
          padding-left: 30px;
        }

        p {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 20px;
          line-height: 36px;

          strong {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 10px;
            line-height: 45px;
          }

          span:nth-of-type(2) {
            font-size: 18px;
            font-weight: 600px;
          }
        }

      }

      .visitor-box:last-child {
        p:nth-child(1) {
          strong {
            background-color: #1EBBBA;
          }
        }

        p:nth-child(2) {
          strong {
            background-color: #38C060;
          }
        }

        p:nth-child(3) {
          strong {
            background-color: #9669DF;
          }
        }

        p:nth-child(4) {
          strong {
            background-color: #F9CB34;
          }
        }
      }
    }
  }

  .more {
    top: 24px;
    right: 24px;
    font-size: 14px;
    position: absolute;
  }
}
</style>
